import 'package:development_assistant/config/font.dart';
import 'package:development_assistant/controller/api_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../config/colors.dart';

class QuickRequest extends StatelessWidget {

  QuickRequest({super.key});
  final ApiController apiController=Get.put(ApiController());

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: _appBar(),
      resizeToAvoidBottomInset: false,
      body: Container(
        padding: EdgeInsets.symmetric(vertical: 20.w,horizontal: 20.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                _selectMethod(),
                SizedBox(width: 15.w,),
                _selectEnv(),
              ],
            ),
            SizedBox(height: 15.h,),
            _urlField(),
            SizedBox(height: 15.h,),
            _paramView(),
            SizedBox(height: 5.h,),
            _resultView()
          ],
        ),
      ),
    );
  }

  _resultView(){
    return Obx(() => Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ElevatedButton.icon(
              onPressed: (){
                apiController.sendRequest();
              },
              icon: const Icon(Icons.send),
              label: Text("发送".tr),
              style: ElevatedButton.styleFrom(
                  backgroundColor:  ColorsConfig().buttonColorOfTheme,
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)
                  )
              ),
            ),
            Obx(() => apiController.resultCode.value!=0?Row(
              children: [
                Container(
                  width: 10,
                  height: 10,
                  margin: EdgeInsets.symmetric(horizontal: 10.w),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(50),
                      color: apiController.resultCode.value==200?Colors.green:Colors.red
                  ),
                ),
                Text(apiController.resultCode.value.toString(),style: FontConfig.fieldTitle,),
              ],
            ):Container())
          ],
        ),
        Container(
            height: 130.h,
            margin: EdgeInsets.symmetric(vertical: 10.h),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color:Colors.grey,width: 1)
            ),
            child: TextField(
              controller: TextEditingController(text: apiController.result.value),
              maxLines: null,
              decoration: const InputDecoration(
                  border: OutlineInputBorder(
                      borderSide: BorderSide.none
                  )
              ),
            )
        ),
      ],
    ));
  }

  _paramView(){
    TextEditingController bodyEditingController=TextEditingController();
    List<Widget> tabs=[
      Container(
        width: 100.w,
        height: 30.h,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color:  ColorsConfig().buttonColorOfTheme
        ),
        child: Center(child: Text("Params")),
      ),
      Container(
        width: 100.w,
        height: 30.h,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color:  ColorsConfig().buttonColorOfTheme
        ),
        child: Center(child: Text("Body")),
      ),
      Container(
        width: 100.w,
        height: 30.h,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color:  ColorsConfig().buttonColorOfTheme
        ),
        child: Center(child: Text("Headers")),
      ),
    ];
    List<Widget> tabsView=[
      //QueryList
      Column(
        children: [
          //添加按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text("Query",style: FontConfig.fieldTitle,),
              Transform.scale(
                scale: 0.7,
                child: ElevatedButton.icon(
                  onPressed: (){
                    apiController.apiParams.add({
                      "name":"",
                      "param":""
                    });
                  },
                  icon: const Icon(Icons.add),
                  label: Text("添加".tr),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: ColorsConfig().buttonColorOfTheme,
                    foregroundColor: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)
                    )
                  ),
                ),
              )
            ],
          ),
          //参数列表
          SizedBox(
            height: 170.h,
            child: Obx(()=>ListView(
              children: List<Widget>.generate(apiController.apiParams.length, (index) {
                return Container(
                  margin: EdgeInsets.only(bottom: 10.h),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color:Colors.grey,width: 1)
                  ),
                  child: Row(
                    children: [
                      SizedBox(
                        width: 100.w,
                        child: TextField(
                          decoration: const InputDecoration(
                              hintText: "Name",
                              border: OutlineInputBorder(
                                  borderSide: BorderSide.none
                              )
                          ),
                          onChanged: (e){
                            apiController.apiParams[index]['name']=e;
                          },
                        ),
                      ),
                      SizedBox(
                        width: 170.w,
                        child: TextField(
                          decoration: const InputDecoration(
                              hintText: "Param",
                              border: OutlineInputBorder(
                                  borderSide: BorderSide.none
                              )
                          ),
                          onChanged: (e){
                            apiController.apiParams[index]['param']=e;
                          },
                        ),
                      ),
                      IconButton(
                          onPressed: (){
                            apiController.apiParams.removeAt(index);
                          },
                          icon: Icon(Icons.delete_outline)
                      )
                    ],
                  ),
                );
              }),
            ))
          ),
        ],
      ),
      //BodyJson
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text("JSON",style: FontConfig.fieldTitle,),
              Transform.scale(
                scale: 0.7,
                child: ElevatedButton.icon(
                  onPressed: (){
                    bodyEditingController.text="";
                  },
                  icon: const Icon(Icons.cleaning_services_rounded),
                  label: Text("清空".tr),
                  style: ElevatedButton.styleFrom(
                      backgroundColor:  ColorsConfig().buttonColorOfTheme,
                      foregroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)
                      )
                  ),
                ),
              )
            ],
          ),
          Container(
              height: 170.h,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              border: Border.all(color:Colors.grey,width: 1)
            ),
            child: TextField(
              maxLines: null,
              controller: bodyEditingController,
              decoration: const InputDecoration(
                border: OutlineInputBorder(
                  borderSide: BorderSide.none
                )
              ),
              onChanged: (e){
                apiController.apiBody.value=e;
              },
            )
          ),
        ],
      ),
      //HeadersList
      Column(
        children: [
          //添加按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text("Headers",style: FontConfig.fieldTitle,),
              Transform.scale(
                scale: 0.7,
                child: ElevatedButton.icon(
                  onPressed: (){
                    apiController.apiHeaders.add({
                      "header":"",
                      "param":""
                    });
                  },
                  icon: const Icon(Icons.add),
                  label: Text("添加".tr),
                  style: ElevatedButton.styleFrom(
                      backgroundColor: ColorsConfig().buttonColorOfTheme,
                      foregroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)
                      )
                  ),
                ),
              )
            ],
          ),
          //参数列表
          SizedBox(
              height: 170.h,
              child: Obx(()=>ListView(
                children: List<Widget>.generate( apiController.apiHeaders.length, (index) {
                  return Container(
                    margin: EdgeInsets.only(bottom: 10.h),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(color:Colors.grey,width: 1)
                    ),
                    child: Row(
                      children: [
                        SizedBox(
                          width: 100.w,
                          child: TextField(
                            decoration: const InputDecoration(
                                hintText: "Header",
                                border: OutlineInputBorder(
                                    borderSide: BorderSide.none
                                )
                            ),
                            onChanged: (e){
                              apiController.apiHeaders[index]['header']=e;
                            },
                          ),
                        ),
                        SizedBox(
                          width: 170.w,
                          child: TextField(
                            decoration: const InputDecoration(
                                hintText: "Param",
                                border: OutlineInputBorder(
                                    borderSide: BorderSide.none
                                )
                            ),
                            onChanged: (e){
                              apiController.apiHeaders[index]['param']=e;
                            },
                          ),
                        ),
                        IconButton(
                            onPressed: (){
                              apiController.apiHeaders.removeAt(index);
                            },
                            icon: Icon(Icons.delete_outline)
                        )
                      ],
                    ),
                  );
                }),
              ))
          ),
        ],
      ),
    ];
    return SizedBox(
      width: 350.w,
      height: 250.h,
      child: DefaultTabController(
        length: tabs.length,
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: TabBar(
            indicatorColor: Colors.transparent,
            dividerColor: Colors.transparent,
            labelColor: Colors.white,
            overlayColor: MaterialStateProperty.all<Color>(Colors.transparent),
            tabs: tabs,
          ),
          body: TabBarView(
            children: tabsView,
          ),
        ),
      )
    );
  }

  _urlField(){
    return Container(
      width: 320.w,
      height: 50.h,
      child: Center(
        child: TextField(
          maxLines: 1,
          decoration: InputDecoration( 
              hintText:"接口路径".tr,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
              )
          ),
          onChanged: (e){
            apiController.apiUrl.value=e;
          },
        ),
      ),
    );
  }

  _selectMethod(){
    return Container(
      width: 120.w,
      height: 40.h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15),
          border: Border.all(color: Colors.grey,width: 1)
      ),
      child: Center(
        child: DropdownButton(
          hint: Obx(()=>Text(apiController.apiMethod.value)),
          items: <String>['GET', 'POST', 'PUT' ,'DELETE'].map((String value) {
            return DropdownMenuItem<String>(
                value: value,
                child: SizedBox(
                  width: 85,
                  child: Text(value,style: const TextStyle(fontSize: 17),),
                )
            );
          }).toList(),
          onChanged: (e){
            apiController.apiMethod.value=e!;
          },
          underline: Container(width: 0),
        ),
      ),
    );
  }

  _selectEnv(){
    return Container(
      width: 180.w,
      height: 40.h,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          border: Border.all(color: Colors.grey,width: 1)
      ),
      child: Center(
        child: DropdownButton(
          hint: Obx(()=>Text(apiController.apiEnv.value.tr)),
          items: <String>['测试环境'.tr, '正式环境'.tr, '体验环境'.tr,'云端环境'.tr].map((String value) {
            return DropdownMenuItem<String>(
                value: value,
                child: SizedBox(
                  width: 140,
                  child: Text(value,style: const TextStyle(fontSize: 17),),
                )
            );
          }).toList(),
          onChanged: (e){
            apiController.apiEnv.value=e!;
          },
          underline: Container(width: 0),
        ),
      ),
    );
  }

  _appBar(){
    return AppBar(
      title: Text("快速请求".tr),
      centerTitle: true,
      leading: IconButton(
        onPressed: (){
          Get.offNamed("/Home",arguments: {"selectIndex":1});
        },
        icon: const Icon(Icons.arrow_back),
      ),
    );
  }


}
